<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css"/>
<script language="javascript" src="js/jquery-1.5.js"></script>
<script language="javascript" src="js/jquery.cookie-min.js"></script>
<script language="javascript" src="js/jquery.pagination.js"></script>
<SCRIPT type="text/javascript">

function pageselectCallback(page_index, jq){
	if(page_index != <s:property value="indexPage" />){
		$("#indexPage").val(page_index);
		$("#page").submit();
	}
	if($("#username").val()!="" && page_index != <s:property value="indexPage"/> ){
		$("#indexPage1").val(page_index);
		$("#selectbyname").submit();
	}
    return false;
}

/** 
 * Initialisation function for pagination
 */
function initPagination() {
    // count entries inside the hidden content
    //var num_entries = jQuery('#hiddenresult div.result').length;
    // Create content inside pagination element
    $("#Pagination").pagination(<s:property value="totalPage" />, {
        callback: pageselectCallback,
        items_per_page:1, // Show only one item per page
		num_display_entries:3,
		current_page:<s:property value="indexPage" />,
		num_edge_entries:2,
		ellipse_text:"...",
		prev_show_always:true,
		next_show_always:true
    });
 }

// When document is ready, initialize pagination
$(document).ready(function(){      
    initPagination();
    $("#province").change(function(){
    	var provinceId = $("#province").val();
    	$("#city").get(0).length = 1;
    	$.getJSON("getRegion.action?parentId="+provinceId,function(data){
    		$.each(data.regions,function(index, item){
    			$("#city").get(0)[index+1] = new Option(item['regionName'],item['regionId']);
    		});
    	});
    });
    $("#city").change(function(){
    	var cityId = $("#city").val();
    	$("#district").get(0).length = 1;
    	$.getJSON("getRegion.action?parentId="+cityId,function(data){
    		$.each(data.regions,function(index, item){
    			$("#district").get(0)[index+1] = new Option(item['regionName'],item['regionId']);
    		});
    	});
    });
});

</SCRIPT>
</head>
<body>
<s:form action="page" >
	<s:hidden id="indexPage" name="indexPage"></s:hidden>
</s:form>
<s:form action="selectbyname">
	<table width="80%">
		<tr>
			<td align="left">
				<input type="text" name="username" id ="username" value="${username}"/>
				<input type="submit" value="查询"/>
			</td>
			<td>
				<select id="province">
					<option>-请选择-</option>
					<s:iterator value="regions">
						<option value="${regionId}">${regionName}</option>
					</s:iterator>
				</select>省
				<select id="city">
					<option>-请选择-</option>
				</select>市
				<select id="district">
					<option>-请选择-</option>
				</select>区
			</td>
			<td align="right">
				<a href="destorysession.action">退出</a>
			</td>
		</tr>
	</table>
<s:hidden id="indexPage1" name="indexPage"></s:hidden>
</s:form>
<table border="1" width="80%" style="text-align: center;">
	<tr>
		<th>usersid</th>
		<th>usersname</th>
		<th>password</th>
		<th>operation</th>
	</tr>
	<s:iterator value="users" id="users">
		<tr>
			<td>${id}</td>
			<td>${username}</td>
			<td>${password}</td>
			<td>
				<a href="editusers.action?id=${id}&indexPage=${indexPage}" style="margin-right: 5px;">Edit</a>
				<a href="deleteusers.action?id=${id}">Delete</a>
			</td>
		</tr>
	</s:iterator>
</table>
<div id="Pagination" style="float: right;padding-right: 20%;padding-top: 5px;"></div>
</body>
</html>